<template>
    <el-container>
        <el-main>
            <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
                <el-tab-pane label="基本信息" name="first">
                    <el-row :gutter="30" style="width: 80%;margin: auto">
                        <el-col :span="30">
                            <div class="grid-content bg-purple">
                                <el-form ref="form" :model="form" label-width="110px">
                                    <el-form-item label="员工ID:">
                                        <el-input v-model="form.id" :disabled="true" style="width: 68%"></el-input>
                                        <el-button type="primary" icon="el-icon-plus">分配</el-button>
                                    </el-form-item>
                                    <el-form-item label="姓名:" prop="name" :rules="[
                                        { required: true, message: '姓名不能为空' }
                                    ]">
                                        <el-input v-model="form.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="证件类型:">
                                        <el-select v-model="form.identityType" placeholder="请选择您的证件类型">
                                            <el-option v-for="item in (getArgs(102))" :label="item.name"
                                                :value="item.id" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="出生日期:">
                                        <el-col :span="30">
                                            <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday"
                                                style="width: 122%;">
                                            </el-date-picker>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="职位编码:">
                                        <el-input v-model="form.name" :disabled="true"></el-input>
                                    </el-form-item>
                                    <el-form-item label="组织ID:">
                                        <el-input v-model="form.name" :disabled="true"></el-input>
                                    </el-form-item>
                                    <el-form-item label="员工类别:">
                                        <el-select v-model="form.employeeCategory" placeholder="请选择员工类别">
                                           <el-option v-for="item in (getArgs(103))" :label="item.name"
                                                :value="item.id" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="入职日期:">
                                        <el-col :span="30">
                                            <el-date-picker type="date" placeholder="选择日期" v-model="form.entryDate"
                                                style="width: 122%;">
                                            </el-date-picker>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="参加工作日期:">
                                        <el-col :span="30">
                                            <el-date-picker type="date" placeholder="选择日期" v-model="form.entryDate"
                                                style="width: 122%;">
                                            </el-date-picker>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="工作城市:">
                                        <el-select v-model="form.workCity" placeholder="请选择工作的城市">
                                            <el-option v-for="item in (getArgs(112))" :label="item.name"
                                                :value="item.id" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="公司邮箱:">
                                        <el-input v-model="form.companyEmail"></el-input>
                                    </el-form-item>
                                    <el-form-item label="个人手机:">
                                        <el-input v-model="form.phoneNumber"></el-input>
                                    </el-form-item>
                                    <el-form-item label="创建人:">
                                        <el-input v-model="form.creatorId" :disabled="true"></el-input>
                                    </el-form-item>
                                    <el-form-item label="更新人:">
                                        <el-input v-model="form.updateId" :disabled="true"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" icon="el-icon-check" @click="addEmpArgs()"
                                            style="width: 70%">保存</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-col>
                        <el-col :span="30">
                            <div class="grid-content bg-purple">
                                <el-form ref="form" :model="form" label-width="110px">
                                    <!-- 这三个input对齐用的不要管 -->
                                    <el-form-item>
                                        <el-input v-model="form.name" v-show="show"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-input v-model="form.name" v-show="show"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-input v-model="form.name" v-show="show"></el-input>
                                    </el-form-item>
                                    <!-- ------------------------ -->
                                    <el-form-item label="性别:">
                                        <el-select v-model="form.sex" placeholder="请选择您的性别">
                                            <el-option label="女" value=0></el-option>
                                            <el-option label="男" value=1></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="证件号码:">
                                        <el-input v-model="form.identityNumber"></el-input>
                                    </el-form-item>
                                    <el-form-item label="职位ID:">
                                        <el-input v-model="form.name" :disabled="true" style="width: 68%"></el-input>
                                        <el-button type="primary" icon="el-icon-search">搜索</el-button>
                                    </el-form-item>
                                    <el-form-item label="职位名称:">
                                        <el-input v-model="form.name" :disabled="true"></el-input>
                                    </el-form-item>
                                    <el-form-item label="所属组织:">
                                        <el-input v-model="form.name" :disabled="true"></el-input>
                                    </el-form-item>
                                    <el-form-item label="在职状态:">
                                        <el-select v-model="form.state" placeholder="请选择在职状态">
                                            <el-option v-for="item in (getArgs(104))" :label="item.name"
                                                :value="item.id" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="试用结束日期:">
                                        <el-col :span="30">
                                            <el-date-picker type="date" placeholder="选择日期"
                                                v-model="form.endProbationperiod" style="width: 122%;">
                                            </el-date-picker>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="累计工龄:">
                                        <el-input v-model="form.seniority"></el-input>
                                    </el-form-item>
                                    <el-form-item label="出勤模式:">
                                        <el-select v-model="form.attendanceType" placeholder="请选择">
                                           <el-option v-for="item in (getArgs(111))" :label="item.name"
                                                :value="item.id" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="个人邮箱:">
                                        <el-input v-model="form.personalEmail"></el-input>
                                    </el-form-item>
                                    <el-form-item label="个人微信:">
                                        <el-input v-model="form.wechatNumber"></el-input>
                                    </el-form-item>
                                    <el-form-item label="创建时间:">
                                        <el-input v-model="form.createTime" :disabled="true"></el-input>
                                    </el-form-item>
                                    <el-form-item label="更新时间:">
                                        <el-input v-model="form.updateTime" :disabled="true"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" icon="el-icon-s-flag" style="width: 70%" @click="pagetwo()">继续
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-col>
                        <el-col :span="30">
                            <div class="grid-content bg-purple">
                                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload" align="center">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <el-form ref="form" :model="form" label-width="100px">
                                    <el-form-item label="国籍:">
                                        <el-select v-model="form.country" placeholder="请选择">
                                           <el-option v-for="item in (getArgs(105))" :label="item.name"
                                                :value="item.id" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="民族:">
                                        <el-select v-model="form.nation" placeholder="请选择">
                                            <el-option v-for="item in (getArgs(106))" :label="item.name"
                                                :value="item.id" :key="item.id"></el-option>

                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="学历:">
                                        <el-select v-model="form.education" placeholder="请选择">
                                            <el-option v-for="item in (getArgs(107))" :label="item.name"
                                                :value="item.id" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="血型:">
                                        <el-select v-model="form.bloodType" placeholder="请选择">
                                            <el-option v-for="item in (getArgs(108))" :label="item.name"
                                                :value="item.id" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="政治面貌:">
                                        <el-select v-model="form.politicsStatus" placeholder="请选择">
                                            <el-option v-for="item in (getArgs(109))" :label="item.name"
                                                :value="item.id" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="婚姻状态:">
                                        <el-select v-model="form.maritalStatus" placeholder="请选择">
                                            <el-option v-for="item in (getArgs(110))" :label="item.name"
                                                :value="item.id" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="备注信息:">
                                        <el-input type="textarea" v-model="form.remark" rows="10" resize="none"
                                            style="width:300px;" placeholder="请输入备注信息" maxlength="300" show-word-limit>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" icon="el-icon-delete-solid" style="width: 70%"  @click="reset()">重置
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="联系信息" name="second">
                    <el-row :gutter="20" style="width: 80%;margin: auto">
                        <el-col :span="10">
                            <div class="grid-content bg-purple">
                                <el-form ref="form" :model="form" label-width="140px">
                                    <el-form-item label="户口性质:">
                                        <el-select v-model="form.cityFarmer" placeholder="请选择">
                                            <el-option v-for="item in (getArgs(100))" :label="item.name"
                                                :value="item.id" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="籍贯:">
                                        <el-select v-model="form.nativePlace" placeholder="请选择">
                                            <el-option v-for="item in (getArgs(101))" :label="item.name"
                                                :value="item.id" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="户籍地址:">
                                        <el-input v-model="form.nativePlaceHouse"></el-input>
                                    </el-form-item>
                                    <el-form-item label="户籍邮编:">
                                        <el-input v-model="form.nativePostalCode"></el-input>
                                    </el-form-item>
                                    <el-form-item label="现居住地:">
                                        <el-input v-model="form.address"></el-input>
                                    </el-form-item>
                                    <el-form-item label="现居住地邮编:">
                                        <el-input v-model="form.addressPostalCode"></el-input>
                                    </el-form-item>
                                    <el-form-item label="紧急联系人:">
                                        <el-input v-model="form.emergencyContactName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="紧急联系人电话:">
                                        <el-input v-model="form.emergencyContactNumber"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" icon="el-icon-check" style="width: 25%;float:left" @click="addEmpArgs()">保存
                                        </el-button>
                                        <el-button type="primary" icon="el-icon-delete-solid"
                                            style="width: 25%;float:left;margin-left:60px" @click="reset2()">重置</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-col>
                        <el-col :span="10">
                            <div class="grid-content bg-purple">
                                <el-form ref="form" :model="form" label-width="100px">
                                    <el-form-item label="创建人:">
                                        <el-input v-model="form.creatorId" :disabled="true"></el-input>
                                    </el-form-item>
                                    <el-form-item label="创建时间:">
                                        <el-input v-model="form.createTime" :disabled="true"></el-input>
                                    </el-form-item>
                                    <el-form-item label="更新人:">
                                        <el-input v-model="form.updateId" :disabled="true"></el-input>
                                    </el-form-item>
                                    <el-form-item label="更新时间:">
                                        <el-input v-model="form.updateTime" :disabled="true"></el-input>
                                    </el-form-item>
                                    <el-form-item label="备注信息:">
                                        <el-input type="textarea" v-model="form.remark" rows="10" cols="30"
                                            resize="none" style="width:300px;" placeholder="请输入备注信息" maxlength="500"
                                            show-word-limit>
                                        </el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="家庭成员" name="third">2</el-tab-pane>
                <el-tab-pane label="教育背景" name="fourth">3</el-tab-pane>
                <el-tab-pane label="工作经历" name="fifth">4</el-tab-pane>
                <el-tab-pane label="奖惩记录" name="sixth">5</el-tab-pane>
                <el-tab-pane label="兼任信息" name="seventh">6</el-tab-pane>
                <el-tab-pane label="劳动合同" name="eighth">7</el-tab-pane>
            </el-tabs>
        </el-main>
        <el-footer>
        </el-footer>
    </el-container>
</template>
<script>
import { aaa } from '@/api/empArgsMG'
export default ({

    data() {
        return {
            imageUrl: '',
            show: false,
            form: {
                id: "",
                name: "",
                identityType: "",
                birthday: "",
                employeeCategory: "",
                entryDate: "",
                workCity: "",
                companyEmail: "",
                phoneNumber: "",
                sex: "",
                identityNumber: "",
                state: "",
                personalEmail: "",
                wechatNumber: "",
                country: "",
                nation: "",
                education: "",
                bloodType: "",
                politicsStatus: "",
                maritalStatus: "",
                remark: "",
                cityFarmer: "",
                nativePlace: "",
                nativePlaceHouse: "",
                nativePostalCode: "",
                address: "",
                addressPostalCode: "",
                emergencyContactName: "",
                emergencyContactNumber: "",
                seniority: "",
                endProbationperiod: "",
                attendanceType: "",
                updateId: "",
                creatorId: "",
                createTime: "",
                updateTime: ""
            },
            activeName: 'first',
            args: [],
        }
    },

    created() {
        this.getEmpArgs()
    },
    methods: {
        getArgs(coding) {
            if (this.args == []) {
                this.getEmpArgs()
            }
            let vals = this.args.filter((val) => {
                return val.coding == coding
            })[0]
            console.log('aaa', this.args.filter((val) => {
                return val.coding == coding
            }))
            console.log('@vals', vals)
            return vals == undefined ? vals : vals.args
        },
        addEmpArgs() {
            this.$axios.post("/employee/add", this.form).then((res) => { console.log(res) }).catch(() => { });
        },
        getEmpArgs() {
            aaa().then(res => {
                console.log(res.data.data)
                this.args = res.data.data;
                console.log('@args:', this.args);

                console.log('coding=>', this.args[0].coding);

            })
        },
        pagetwo(){
            this.activeName = "second"
        },
        reset2(){
             this.form = {
                  remark: "",
                cityFarmer: "",
                nativePlace: "",
                nativePlaceHouse: "",
                nativePostalCode: "",
                address: "",
                addressPostalCode: "",
                emergencyContactName: "",
                emergencyContactNumber: "",
             }
        },
        reset(){
            this.form={
                name: "",
                identityType: "",
                birthday: "",
                employeeCategory: "",
                entryDate: "",
                workCity: "",
                companyEmail: "",
                phoneNumber: "",
                sex: "",
                identityNumber: "",
                state: "",
                personalEmail: "",
                wechatNumber: "",
                country: "",
                nation: "",
                education: "",
                bloodType: "",
                politicsStatus: "",
                maritalStatus: "",
                remark: "",
                seniority: "",
                endProbationperiod: "",
                attendanceType: "",
            }
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        add() {
            console.log("aaa");
        }
    },
    rules: {
        name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
    }
})
</script>
<style>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {}

.bg-purple-light {
    background: #f2e5e5;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 200px;
    background: #cfd1d3;


}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 50px;
    color: #8c939d;
    width: 210px;
    height: 250px;
    line-height: 210px;
    text-align: center;
}

.avatar {
    width: 200px;
    height: 200px;
    display: block;
}

.el-input {
    border-color: #409EFF;
    width: 300px;
}

.el-upload {
    border-color: #409EFF;
    width: 150px;
}
</style>